<!doctype html>
<!--[if lt IE 7 ]> <html class="no-js ie6" lang="en"> <![endif]-->
<!--[if IE 7 ]>    <html class="no-js ie7" lang="en"> <![endif]-->
<!--[if IE 8 ]>    <html class="no-js ie8" lang="en"> <![endif]-->
<!--[if (gte IE 9)|!(IE)]><!--> <html class="no-js" lang="en"> <!--<![endif]-->
	<head>
		<meta charset="utf-8">

		<title>FlippieBook.js</title>

		<meta name="generator" content="editplus" />
		<meta name="author" content="Ron Valstar" />
		<meta name="keywords" content="" />
		<meta name="description" content="" />
		<meta name="viewport" content="width=device-width, initial-scale=1.0">

		<link rel="shortcut icon" href="favicon.ico">
		<link href="style/screen.css" media="all" type="text/css" rel="stylesheet" />

		<script src="//ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script><script>window.jQuery||document.write("<script src='scripts/jquery-1.6.1.min.js'>\x3C/script>")</script>
		<!--sscript type="text/javascript" src='scripts/jquery-1.6.1.js'></script-->
		<script type="text/javascript" src="scripts/Tween.js"></script>
		<script type="text/javascript" src="scripts/FlippieBook.js"></script>
		<script type="text/javascript">
			var oBook;
			$(function(){
//				$('h1').text('jQuery.'+$.FlippieBook.id+' '+$.FlippieBook.version);
//				$('#footer>div').html($.FlippieBook.copyright.replace('Ron Valstar','<a href="http://www.sjeiti.com/">Ron Valstar</a>'));
//				$('#page>table>tbody>tr:odd').addClass('odd');
//				$('#page>table>tbody>tr:even').addClass('even');
//				$('#page tbody>tr').find('td:eq(0)').addClass('property');
				// header menu
				var mMenu = $('<ul id="menu" />').appendTo('#header>div');
				$('<li><a href="#">FlippieBook</a></li>').appendTo(mMenu).click(function(){$(document).scrollTop(0)});
				$('#page>h2').each(function(i,o){
					mMenu.append('<li><a href="#'+$(this).text()+'">'+$(this).text()+'</a></li>');
					$(this).attr('id',$(this).text());
				});
				

//				$(function(){
//					var s = '';
//					for (var i=0;i<26;i++) {
//						s += '<li style="color:#'+Math.floor(16777215*Math.random()).toString(16)+'">'+String.fromCharCode(65+i)+'</li>';
//					}
//					return s;
//				}()).insertAfter($('#flippie>li:last-child'));
//				var aBg = [
//					'url(http://www.filterforge.com/filters/9719.jpg)'
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
////					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
////					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
////					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'#'+Math.ceil(16777215*Math.random()).toString(16)
//					,'#'+Math.ceil(16777215*Math.random()).toString(16)
//					,'#'+Math.ceil(16777215*Math.random()).toString(16)
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'url(http://www.filterforge.com/filters/5824-v2.jpg)'
//					,'url(http://www.filterforge.com/filters/9719-v5.jpg)'
////					,'url(http://www.filterforge.com/filters/7448.jpg)'
////					'url(http://www.filterforge.com/filters/5934.jpg)'
//				];
//				$('ul#flippie>li').each(function(i,el){
//					var j = Math.floor(i/2);
//					$(el).css({background:aBg[j%aBg.length]});
//				});
//				$('ul#flippie>li:eq(3)').html($('<img src="http://www.filterforge.com/filters/9513-v7.jpg" />').width(256).height(256));
//				$('ul#flippie>li:eq(6)').html($('<img src="http://www.filterforge.com/filters/8573.jpg" />').width(256).height(256));

				// illustration
				var $Ill = $('div.ill');
				var fnIll = function fnIll(){
					$Ill.animate({a:1},{
						duration: 9999
						,step: function(){
							var t = Math.round(.02*(new Date()).getTime())%512;
							$Ill.css({backgroundPosition: t+'px '+-2*t+'px'});
						}
						,complete: fnIll
					});
				};
				fnIll();

				// call FlippieBook
				oBook = FlippieBook({
					id: 'flippie'
					,width: 640
					,height: 450
					,page: 2
				});
				oBook.addInteractiveElement('p.copyThisText');

				// setup function examples
				var $Exposed = $('ul.exposed>li>a');
				$Exposed.each(function(i,el){
					var $A = $(el);
					$A.attr('href','javascript:'+$A.find('pre').text());
				});
			});
		</script>
		<script src="http://www.sjeiti.com/ga.js" type="text/javascript"></script>
	</head>
	<body>
		<div id="header">
			<div><h1><span>FlippieBook.js</span></h1></div>
		</div>
		<div id="page">
			http://en.wikipedia.org/wiki/Flip_page
			<p>FlippieBook will sort any nodetype by it's text- or attribute value, or by that of one of it's children.</p>

			<p>You can download FlippieBook as <a href="http://code.google.com/p/tinysort/downloads">zip</a> or do a <a href="http://tinysort.googlecode.com/svn/trunk">repository checkout</a>. If you stumble upon anything out of the ordinary you can <a href="http://code.google.com/p/tinysort/issues">file them here</a>.</p>

			<div id="kaft">
				<ol id="flippie">
					<li>back</li>

					<li>
						<p>FlippieBook is a flip book for html.</p>
						<p>It might not look as fancy as Flash but it does work on all devices.</p>
					</li>
					<li>
						<p class="ln5">You can turn the pages by swiping your finger, by drag and drop, or by simply clicking a page.</p>
						<p>Try it</p>
						<img src="data/hand.png" class="right" />
					</li>

					<li
						><p class="ln2">FlippieBook also comes with a bunch of Javascript commands like:</p>
						<a><pre>oBook.prev();</pre></a>
						<a><pre>oBook.next();</pre></a>
					</li>
					<li>
						<p class="ln4"><img src="data/img.png" class="right" /><br/><br/><br/>You can do anything you would normally do in html; images, <a href="http://www.google.com/?q=Sjeiti#q=Sjeiti">hyperlinks</a>, <a href="#form">forms</a>, <a href="javascript:oBook.setPage('video');">video</a> and even <a href="#flash">Flash</a>.</p>
					</li>

					<li>
						<p>FlippieBook works on any nodeType you want. In this case it's an ordered list with list elements. But you can make it a bunch of divs within a div for all I care.</p>
					</li>
					<li>
						<p>You style the pages as you would normally do.</p>
					</li>

					<li>
						<p class="ln2">FlippieBook can stop or start video's when opening a page.</p>
					</li>
					<li id="video">
						<p class="ln4">A simple video:</p>
						<video width="240" height="240" poster="data/Fire.jpg" autoplay="autoplay" loop="loop">
							<source src="data/Fire.webm" type="video/webm" />
							<source src="data/Fire.mp4" type="video/mp4" />
							<source src="data/Fire.ogv" type="video/ogg" />
						</video>
					</li>

					<li id="flash">
						<p>Flash is possible as long as the wmode parameter is set to transparent. This enables the browser set the z-index.</p>
					</li><li></li>

					<li id="form">
						<p>Clicking a form element will not cause the page to turn</p>
						<textarea>you can type here</textarea>
						<input type="button" value="click" />
					</li>
					<li>
						<p class="ln2">If you want to other elements to have mouse interaction you can add them by using the following method:</p>
						<pre>oBook.addInteractiveElement('p.copyThisText');</pre>
						<p>This method takes </p>
						<p class="copyThisText">So this text here can be copied.</p>
					</li>

					<li>
						<p class="ln4">For longer pages the overflowing content is usually simply ignored.</p>
						<p class="ln2">FlippieBook can try to fix this for you, it will then try to break up the page into multiple ones.</p>
						<p class="ln2">But you can always just use a scrollbar.</p>
					</li>
					<li>
						<div class="ill"></div>
					</li>

					<li></li>
				</ol>
			</div>

			<h2>usage</h2>

			<ul class="exposed">
				<li><a><pre>oBook.prev();</pre></a></li>
				<li><a><pre>oBook.next();</pre></a></li>
				<li><a><pre>oBook.first();</pre></a></li>
				<li><a><pre>oBook.last();</pre></a></li>
				<li><a><pre>oBook.setPage(0);</pre></a></li>
				<li><a><pre>oBook.setPage(5);</pre></a></li>
				<li><a><pre>console.log(oBook.getPage());</pre></a></li>
				<li><a><pre>console.log(oBook.pages());</pre></a></li>
				<!--li><a href="javascript:oBook.addPage(
					$('<li><p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam.</p></li>').css({
						background:'#FFF'
						,fontSize:'11px'
					}),5);
				">oBook.addPage()</a></li-->
				<li><a><pre>var $Li = $('&lt;li/&gt;').css({
	background:'#'+Math.floor(Math.random()*Math.pow(16,3)).toString(16)
	,padding: '50px'
}).load('random.php',function(data){
	oBook.addPage($Li,5);
});</pre></a></li>
			</ul>
			
			<h2>examples</h2>


		</div>
		<div id="footer"> 
			<div>© 2011 <a href="http://www.sjeiti.com/">Ron Valstar</a></div>
		</div>
	</body>
</html>